<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="shopcar"
      tooltip-effect="light"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <!-- tooltip-effect="light" 出现省略号的时候鼠标移上去 有完整的提示 是白色背景（light）还是深色背景（dark） -->
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="name" label="标题" width="120"> </el-table-column>
      <el-table-column prop="price" label="价格" width="120"> </el-table-column>
      <el-table-column prop="dic" label="描述" show-overflow-tooltip>
      </el-table-column>
      <!-- show-overflow-tooltip 当内容放不下的时候出现三个点省略号 -->
      <el-table-column label="小记" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.num * scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.num"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-checkbox v-model="checked" @change="checkAll">全选</el-checkbox>
      总价:{{ allprice }} 总数：{{ allnum }}
      <el-button type="primary" @click="removeAll">删除选中</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      //全选按钮的值
      selectList: [],
      //选中的列表数据
    };
  },
  methods: {
    checkAll() {
      if (this.checked == false) {
        this.$refs.multipleTable.clearSelection();
      } else {
        this.$refs.multipleTable.toggleAllSelection();
      }
    },
    //判断全选按钮的状态  如果是false 就全部取消 如果是true 就 全部选中 这两个方法都是elementui 自带的方法

    handleSelectionChange(val) {
      console.log(val);
      this.selectList = val;
      if (val.length == this.shopcar.length && this.shopcar.length != 0) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    //点击表格里的复选框会触发的方法 如果
    removeAll() {
      this.$store.commit("removeAll", this.selectList);
      this.checked = false;
      console.log(this.checked);
    },
    //选中删除
  },
  created() {},
  mounted() {},
  components: {},
  computed: {
    shopcar() {
      return this.$store.state.shopcar;
    },
    allnum() {
      let Num = 0;
      this.selectList.forEach((item) => {
        Num += item.num;
      });
      return Num;
    },
    //计算总数
    allprice() {
      let Price = 0;
      this.selectList.forEach((item) => {
        Price += item.price * item.num;
        console.log();
      });
      return Price;
    },
    //计算总计
  },
  watch: {},
};
</script>

<style lang="scss" scoped></style>
